<template>
  <div class="modification">
    <!-- 用户修改权限 -->
    <div class="cation-icon">
      <i class="iconfont">&#xe626;</i>
      <span>{{this.name}}权限修改</span>
    </div>
    <el-tree
      :data="tableData"
      show-checkbox
      default-expand-all
      :default-checked-keys="pitchdefault"
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @check-change="nodekey"
      style="height: 350px; overflow:auto"
    ></el-tree>
    <div style="margin-top: 20px;margin-left: 10px;">
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button @click="submitForm()">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      list_id: null, // 选择的id
      pitchdefault: [] // 默认选中
    };
  },
  watch: {},
  computed: {},
  methods: {
    companyand() {
      this.$store
        .dispatch("Company")
        .then(data => {
          this.tableData = data;
        })
        .catch(error => {
          console.log("请求失败：" + error);
        });
    },
    // 提交
    submitForm() {
      var authority = {
        id: this.id, // 角色id
        ids: this.list_id // 权限id
      };
      this.$store
        .dispatch("Modification", authority)
        .then(data => {
          this.$notify({
            title: "修改成功",
            message: "你已成功修改用户的权限信息",
            type: "success"
          });
          this.$router.replace({ name: "pageNotFound" });
        })
        .catch(error => {
          console.log("请求失败：" + error);
          this.$notify.error({
            title: "修改失败",
            message: "用户权限信息修改失败"
          });
        });
    },
    // 取消选择
    toggleSelection() {
      this.$refs.tree.setCheckedKeys([]);
    },
    // 当前选中节点变化时触发的事件
    nodekey() {
      this.list_id = this.$refs.tree.getCheckedKeys();
      console.log(this.list_id, typeof this.list_id);
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    // 获取当前默认选中角色的权限
    var seek = {
      id: this.$route.query.id
    };
    this.$store
      .dispatch("Batchdsearch", seek)
      .then(data => {
        let daname;
        data.forEach(element => {
          daname = element.id;
          this.pitchdefault.push(daname);
        });
        this.$refs.tree.setCheckedKeys(this.pitchdefault);
      })
      .catch(error => {
        console.log("请求失败：" + error);
      });
    this.companyand();
  },
  mounted() {}
};
</script>
<style scoped>
.cation-icon {
  height: 50px;
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #eeeeee;
}
.cation-icon span {
  font-size: 14px;
}
.iconfont {
  margin-left: 15px;
  margin-right: 5px;
  font-size: 18px;
}
</style>